<template>
  <div class="warpper-box payOrder">
    <a-card style="margin-top: 10px;">
      <a-form layout="inline">
        <a-form-item label="客户名称">
          <a-input placeholder="请输入客户名称" v-model="params.enterpriseName"></a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="loadTable(true)">搜索</a-button>
          <a-button type="primary" icon="setting" @click="reset()">重置</a-button>
        </a-form-item>
      </a-form>
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="enterpriseId" style="margin-top: 10px;">
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record">
          <!-- 编辑模块 | 字段 -->
          <a @click="goDetail(record)">详情</a>
        </span>
      </a-table>
      <div style="height: 60px;"></div>
    </a-card>
    <!-- 客户资源详情 -->
    <a-modal v-model="visible" title="合作详情">
      <a-table :columns="columnsDetail" :data-source="loadDataDetail" :pagination="false" rowKey="id">
      </a-table>
    </a-modal>
    <!-- 返回||提交 -->
    <a-card class="footBtn" hoverable :bordered="false">
      <a-button key="back" icon="logout" class="ant-btn-warning" @click="goBack">返回</a-button>
    </a-card>
  </div>
</template>

<script>
import {
  COLUMNS_CANALCUSTOM
} from "./form"
import {
  pageLocalServiceEnterprise,
  localServiceEnterpriseFeeDetail
} from "@/api/human/fall"
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'fallCustomList',
  components: {

  },
  data() {
    return {
      params: {
        localServiceId: "",
        enterpriseName: ""
      },
      table: {
        columns: COLUMNS_CANALCUSTOM,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },

      visible: false, // 合作详情开关
      columnsDetail: [{
        title: '合作类型',
        dataIndex: 'bizTypeName'
      }, {
        title: '支付',
        dataIndex: 'payFee',
        customRender: (text, record) => {
          if (record.payFeeWay == 1) {
            return text + ' 元'
          } else if (record.payFeeWay == 2) {
            return text + ' %'
          }
          return ''
        }
      }],
      loadDataDetail: [],

      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据
    }
  },
  filters: {

  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {

  },
  activated() {
    this.params.localServiceId = this.$route.query.localServiceId || "";
    this.loadTable(true);
  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 获取列表
    async loadTable(flag) {
      let params = this.params;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await pageLocalServiceEnterprise(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 查看合作详情
    goDetail(row) {
      this.visible = true;
      this.getChannelEnterpriseFeeDetail(row.enterpriseId)
    },
    // 获取合作类型列表
    async getChannelEnterpriseFeeDetail(id) {
      const { code, data } = await localServiceEnterpriseFeeDetail(id);
      if (code === '1') {
        this.loadDataDetail = data;
      }
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.params.enterpriseName = "";
      this.loadTable(true);
    },
    goBack() {
      this.$router.back();
    }
  }
}
</script>
<style lang="less">
.payOrder {
  .ant-tabs-bar {
    margin-bottom: 5px;
  }
}
</style>